/* 概况*/ 
<template>
  <!-- 组件主盒子 -->
  <div class="statistics">
    <!-- 面包屑导航 -->
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>概况</el-breadcrumb-item>
    </el-breadcrumb> -->
    <div class="leftBox" style="border-radius: 5px;">
      <!-- <div class="news">
        <p class="goodTime">最新消息</p>
        <div else>
          <div class="newOrder" style="margin-top:40px;">
            <span class="img"><img src="../../assets/img/tounan.png"></span>
            <span class="title">{{text}}</span>
          </div>
          <div class="newStay">
            <span class="img"><img src="../../assets/img/tounan.png"></span>
            <span class="title">{{texts}}</span>
          </div>
        </div>
        <div class="nonews" v-if="false">
          <dt><img src="../../assets/img/no.png"></dt>
          <dd>暂无消息</dd>
        </div>
      </div>最新消息通知 -->
      <div class="wholeBox">
        <div v-for="(item, index) in orders" :key="index" class="watOrderIng" :class="index === orders.length - 1 ? 'goodList-final ' : ''">
          <div class="orders" :class="sstt[index]">
            <div class="wating">
              {{ item.text }}<span>{{ item.num }}</span>
            </div>
            <div class="watRight">
              <p class="fahuo">
                {{ item.name }}<span>{{ item.num1 }}</span>
              </p>
              <p class="fahuo">
                {{ item.name1 }}<span>{{ item.num2 }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- 全部订单 -->
    </div>
    <!-- 数据看板 -->
    <div class="bottoms">
      <div class="dataBoard" >
        <div id="test_app" style="width:100%">
          <!--echarts的容器-->
          <div id="main" style="height: 520px; background: #fff" ></div>
        </div>
      </div>
      <!-- leftBox -->
      <div class="rightBox">
        <div class="perInfor">
          <p class="goodTime">{{ getTimeState() }}</p>
          <div class="Infor">
            <dl>
              <dt><img src="../../assets/img/tounan.png" style="100%;" /></dt>
              <dd class="name">{{ user_name }}</dd>
              <dd class="phone">
                <img src="../../assets/img/phone.png" />{{ mobile }}
              </dd>
              <!-- <router-link to="/charts/modify">11111</router-link> -->
              <el-button type="primary" @click="modify()" class="modify"
                >修改信息</el-button
              >
            </dl>
          </div>
          <div class="notice">
            <span class="title">公告</span>
            <span class="noticeText">{{ noticeText }}</span>
          </div>
        </div>
        <!-- 个人信息 -->
      </div>
    </div>

    <!-- rightBox -->
    <div class="hygrometer" ref="hygrometer"></div>
  </div>
</template>
<script type="text/ecmascript-6">
import * as echarts from "echarts";
import Chart from "echarts";
import text from "../text/text.vue";
export default {
  components: { text },
  name: "welcome",
  data() {
    return {
      mobile: "",
      password: this.$route.params.password,
      //今日营业额
      new_users: "",
      //今日订单
      today_amount: "",
      //今日访客
      today_login: "",
      //今日新增会员
      today_order: "",
      one: "",
      two: "",
      three: "",
      four: "",
      handleClose: false,
      list: [{ text: "hhh" }, { text: "lll" }], //被监听的数组
      text: "有新订单，请及时处理！",
      texts: "有新公告，请及时处理！",
      user_name: "",
      accountnumber: "3207428386",
      noticeText: "今日开工大吉！今日开工大吉！今日开工大吉！",
      modifyinfor: false,
      charts: "",
      opinionData: ["155", "400", "900", "800", "300", "900", "270"], //数据
      sstt: ["ss1", "ss2", "ss3", "ss4"],
      orders: [
        {
          text: "待处理订单",
          num: "30",
          name: "待发货订单",
          num1: "20",
          name1: "待售后订单",
          num2: "10",
        },
        {
          text: "总会员数",
          num: "3000",
          name: "今日新增会员",
          num1: "20",
          name1: "本月新增会员",
          num2: "10",
        },
        {
          text: "总订单数",
          num: "30",
          name: "今日订单",
          num1: "10",
          name1: "本月订单",
          num2: "20",
        },
        { text: "总商品数", num: "69", name1: "库存预警", num2: "10" },
      ],
    };
  },
    
  methods: {
    //概况图
    aa() {
      let hygrometer = this.$echarts.init(this.$refs.hygrometer);
      let option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      };
      hygrometer.setOption(option);
    },
    //显示问好
    getTimeState() {
      // 获取当前时间
      let timeNow = new Date();
      // 获取当前小时
      let hours = timeNow.getHours();
      // 设置默认文字
      let state = ``;
      // 判断当前时间段
      if (hours >= 0 && hours <= 10) {
        state = `早上好，群思！`;
      } else if (hours > 10 && hours <= 14) {
        state = `中午好，群思！`;
      } else if (hours > 14 && hours <= 18) {
        state = `下午好，群思！`;
      } else if (hours > 18 && hours <= 24) {
        state = `晚上好，群思！`;
      }
      return state;
    },
    //个人信息
    perInfor() {
      var res = JSON.parse(localStorage.getItem("userdata"));
      console.log(res, "我是存取");
      this.$axios({
        method: "post",
        url: "/admin/user_list",
        params: {
          mobile: res.data.mobile,
        },
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
      }).then((res) => {
        console.log(res, "个人信息");
        this.user_name = res.data.data.user_name;
        this.mobile = res.data.data.mobile;
      });
    },
    //全部订单
    wholeBox() {
      this.$axios({
        method: "post",
        url: "/index/dingdan",
      }).then((res) => {
        // console.log(res,"全部订单")
        this.one = res.data.data.one;
        this.two = res.data.data.two;
        this.three = res.data.data.three;
        this.four = res.data.data.four;
      });
    },
    //数据看板
    dataBoard() {
      this.$axios({
        method: "post",
        url: "/index/shujukanban",
      }).then((res) => {
        // console.log(res,"数据看板")
        this.new_users = res.data.data.new_users;
        this.today_amount = res.data.data.today_amount;
        this.today_login = res.data.data.today_login;
        this.today_order = res.data.data.today_order;
      });
    },
    getMobile() {
      // this.$axios({
      //       method: 'post',
      //       url: 'http://cms_lyqswl_com/index.php/Admin/admin/user_list'
      // })
      // .then(res=>{
      //   console.log(res)
      // })
      // 取到路由带过来的参数
      const routerParams = this.$route.query.mobile;
      console.log(routerParams, "取到路由带过来的参数");
      // 将数据放在当前组件的数据内
      this.phone = routerParams;
      this.accountnumber = routerParams;
    },

    //点击去修改页面
    modify() {
      this.$router.push({
        name: "modify",
      });
    },
    //点击确定 保存修改后的数据
    submitForm() {
      this.modifyinfor = false;
    },
    //关闭弹出框 取消
    closeDialog() {
      this.modifyinfor = false;
    },
    //点击查看全部订单
    look() {
      console.log(111);
    },
    // 数据看板
    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        title: {
          left: "3%",
          top: "5%",
          text: "最近一周订单数量", //标题文本，支持使用 \n 换行。
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          align: "right", //文字在前图标在后
          left: "3%",
          top: "15%",
          data: ["近一周"],
        },
        grid: {
          top: "30%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },

        toolbox: {
          feature: {
            saveAsImage: {}, //保存为图片
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          axisTick: {
            alignWithLabel: true, //保证刻度线和标签对齐
          },
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], //x坐标的名称
        },
        yAxis: {
          type: "value",
          boundaryGap: true,
          splitNumber: 4, //纵坐标数
          interval: 100, //强制设置坐标轴分割间隔
        },

        series: [
          {
            name: "近一周",
            type: "line", //折线图line;柱形图bar;饼图pie
            stack: "总量",
            areaStyle: {
              //显示区域颜色---渐变效果
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#CCEEFD", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#ffffff", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            itemStyle: {
              color: "#6EC9FD", //改变折线点的颜色
              lineStyle: {
                color: "#6EC9FD", //改变折线颜色
              },
            },
            data: this.opinionData,
          },
        ],
      });
    },
  },
  //调用
  mounted() {
    this.$nextTick(function () {
      this.drawLine("main");
    });
      var myChartContainer = document.getElementById('main')
     // 获取自适应的高度和宽度
         var resizeMyChartContainer = function() {
         myChartContainer.style.height = window.innerHeight * 0.6 + 'px';
         myChartContainer.style.width = window.innerWidth * 0.68 + 'px';
         };
     // 设置容器高和宽
         resizeMyChartContainer();
         var myChart = echarts.init(myChartContainer);
         let option = {};
        
         myChart.setOption(option);
     // 自适应高和宽
         window.onresize = function () {
         resizeMyChartContainer();
         myChart.resize();
         }
  },
  created() {
    this.getMobile();
    this.dataBoard(); //数据看板
    this.wholeBox(); //全部订单
    this.perInfor(); //个人信息
    this.aa();
  },
};
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
}
.statistics {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* .fourBox{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
} */
.leftBox {
  width: 100%;
}
.leftBox > div,
.rightBox > div {
  background-color: #fff;
  width: 100%;
  padding: 1.4rem 1.25rem;
  box-sizing: border-box;
  margin-bottom: 1.06rem;
  border-radius: 5px;
}

/* .news .img img{width: 2.31rem;height: 2.31rem;margin-right:3.125rem;vertical-align: middle;}
.news .newOrder,.news .newStay{height: 5.5rem;background-color: #FAFBFD;border-radius: 5px;padding:0 1.25rem;width:96%;margin:0 auto;margin-top:1.25rem;box-sizing: border-box;}
.news .title{line-height:5.5rem;font-size: 1.25rem;font-weight: bold;color: #FE4504;}
.news .goodTime{overflow: hidden;} */
/* .nonews{text-align: center;vertical-align: middle;align-items: center;color:#C3C3C3;font-size:18px;margin-top:65px;} */
/* .dataBoard{width:100% !important;} */
.wholeBox {
  display: flex;
  justify-content: space-between;
}
.lookBoard {
  display: flex;
  justify-content: space-around;
  text-align: center;
  width: 100%;
  margin: 0 auto;
}
.lookBoard dl {
  flex: 1;
  text-align: center;
  margin: 2.3rem 0;
}
.lookBoard dl dt {
  position: relative;
  width: 8.75rem;
  height: 8.75rem;
  margin: 0 auto;
}
.lookBoard dd {
  color: #616161;
  font-size: 1rem;
  font-weight: 600;
  padding-top: 1.12rem;
  box-sizing: border-box;
}
.zhe {
  position: absolute;
  display: block;
  top: 2.93rem;
  background-color: #fff;
  width: 70%;
  left: 15%;
  color: #3d3d3d;
  font-size: 1.25rem;
  text-align: center;
  font-weight: bold;
  line-height: 2.81rem;
  height: 2.81rem;
}

.rightBox {
  width: 18.5%;
  border-radius: 5px;
  background-color: #fff;
  margin-right: 12px;
}
/* 
.perInfor{position: relative;} */
.goodTime {
  font-size: 1.125rem;
  color: #3d3d3d;
  font-weight: bold;
}
.perInfor .Infor dl {
  overflow: hidden;
  padding: 0.937rem 0rem;
  margin-top: 1rem;
}
.perInfor .Infor dt {
  width: 6.125rem;
  height: 5.125rem;
  float: left;
}
.perInfor .Infor dt img {
  width: 100%;
}
.perInfor .Infor dd img {
  width: 0.875rem;
  height: 1.12rem;
  margin-right: 0.375rem;
}
.perInfor .Infor dd {
  width: calc(100% - 6.9rem);
  float: right;
}
.perInfor .name {
  font-size: 1.125rem;
  font-weight: bold;
  margin-bottom: 1rem;
}
.perInfor .name span {
  font-size: 0.875rem;
  font-weight: 400;
  color: #a5a5a5;
  margin-left: 0.93rem;
}
.perInfor .phone img {
  float: left;
}
.perInfor .phone {
  font-size: 1rem;
  color: #3d3d3d;
  line-height: 1.25rem;
}
.perInfor .notice {
  background-color: #fafbfd;
  border-radius: 5px;
  padding: 1.25rem 1.25rem;
  width: 96%;
  margin: 0 auto;
  margin-top: 1.25rem;
  box-sizing: border-box;
}
.perInfor .notice .title {
  color: #436af2;
  font-weight: bold;
  font-size: 1.25rem;
  display: inline-block;
  padding-right: 10px;
}
.perInfor .notice .noticeText {
  font-size: 14px;
  color: #3d3d3d;
  line-height: 30px;
}
.perInfor .modify {
  width: 5.06rem;
  height: 2rem;
  border-radius: 5px;
  background-color: #436af2;
  border: 1px solid #436af2;
  margin-top: 1rem;
  margin-left: 10px;
  font-size: 12px;
}
.el-icon-arrow-right {
  font-weight: 600;
}
.watOrderIng {
  width: 24%;
}
.orders {
  width: 100%;
  color: #ffffff;
  display: flex;
}
.ss1 {
  background: url("../../assets/img/orders1.png") no-repeat;
  background-size: 100% 100%;
}
.ss2 {
  background: url("../../assets/img/orders2.png") no-repeat;
  background-size: 100% 100%;
}
.ss3 {
  background: url("../../assets/img/orders3.png") no-repeat;
  background-size: 100% 100%;
}
.ss4 {
  background: url("../../assets/img/orders4.png") no-repeat;
  background-size: 100% 100%;
}
.orders .wating {
  font-size: 14px;
  width: 50%;
  border-right: 1px solid #fff;
  text-align: center;
  height: 100%;
  padding: 84px 0;
  box-sizing: border-box;
}
.orders .wating span {
  display: block;
  font-size: 30px;
  margin-top: 2px;
}
.watRight {
  width: 50%;
  text-align: center;
  font-size: 14px;
}
.watRight .fahuo:first-child {
  border-bottom: 1px solid #fff;
  box-sizing: border-box;
}
.watRight .fahuo {
  padding: 28px 0;
  box-sizing: border-box;
}
.watRight span {
  display: block;
  font-size: 30px;
  margin-top: 2px;
}
.goodList-final .watRight .fahuo:first-child {
  border-bottom: none;
  padding: 27px 0;
}
.bottoms{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.dataBoard{
  width: 80%;
  border-radius: 5px;
}
#main{
  border-radius: 5px;
  width: 100% !important;
}
#main canvas{
  border: 1px solid red;
}
</style>